Improve SSR hydration performance #6204
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Fixes #4308 by avoiding de- and reattaching nodes during hydration - Turns existing append, insert and detach methods into "upserts" The new "hydration mode" was added in order to maintain the detach by default behavior during hydration. By tracking which nodes are claimed during hydration unclaimed nodes can then removed from the DOM at the end of hydration without touching the remaining nodes.
4 tasks
|
Thank you @benmccann and @jonatansberg ! |
|
This PR creates a weird issue where Maybe also links to this issue: #1067 Update : This one includes reproduction: https://github.com/sveltejs/kit/issues/1288 |
tanhauhau
reviewed
May 1, 2021
Conduitry
added a commit
to Conduitry/sveltejs_svelte
that referenced
this pull request
May 3, 2021
This reverts commit 10e3e3d.
4 tasks
4 tasks
hbirler
added a commit
to hbirler/svelte
that referenced
this pull request
Jun 9, 2021
Unreverts the hydration optimisation from sveltejs#6204 and fixes the `claim_text` issue as described in sveltejs#6279 (comment)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #5623. This is that PR rebased with logging removed. Thanks to @jonatansberg for paving the way on this!
Also closes #4309
Background
This PR improves SSR hydration performance through minimizing DOM mutations during hydration by avoiding de- and reattaching nodes during hydration. This should fix #1067, fix #4308, fix #5108, and fix #4975.
In order for this to work I added a new new "hydration mode". This way it's possible to maintain the detach by default behavior during hydration without modifying the generated component output. There might be better ways to do this if we reconsider fragment creation (as suggested in #3898 and #4219) but that would be a significant undertaking.
The existing append, insert and detached methods have been modified to track which nodes are claimed during hydration. That way unclaimed nodes can then removed from the DOM at the end of hydration without touching the remaining nodes.
In order for this to work the append, insert and detach methods have also been made idempotent (i.e. "upserts") in order to allow attaching an already attached DOM node.
Results
Initial local benchmarks against johnells.se (which runs on Sapper) shows a 50% reduction of LCP when running Lighthouse, which results in decent PageSpeed score improvement.
Production benchmarks on the SvelteKit app at https://c3.ventures/ show a PageSpeed score improvement from 92 to 99.